<template>
  <div class="login">
    <!--  :rules="[{ required: true, message: '请填写用户名' }]"  -->
    <!-- <h3>登录</h3> -->
    <van-form @submit="onSubmit">
      <van-field v-model="account" name="account" label="用户名" placeholder="请输入" />

      <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入" />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>

      <div>
        <router-link class="link" to="/register">还没账号，立即注册?</router-link>
      </div>

    </van-form>
  </div>
</template>

<script>
// 导入组件
import { Toast, Dialog } from 'vant'
import { login } from '../api/index'
export default {
  data() {
    return {
      account: '',
      password: '',
    };
  },
  methods: {
     async onSubmit(values) {

      // 解构赋值
      let { account, password } = values
      // 判断输入框是否为空
      if (account == "" || password == "") {
        // 弹窗提示
        // Toast.fail('输入框不能为空');
        Toast('输入框不能为空~')
        return false;
      }
      // console.log({account, password})
      await login({account, password}).then(
        content=>{
          let {code , msg , token , nickName, imgUrl} = content;
          console.log(content)
          if(code == 200) {
             // 给用户反馈“注册结果”
             localStorage.setItem("UTOKEN", token);
             localStorage.setItem("UNICKNAME", nickName);
             localStorage.setItem("IMGURL", imgUrl);
              Dialog.alert({
                confirmButtonColor: "#0c8bf3",
                message: '登录成功。',
              }).then(() => {
                // on close
                // 跳转登录页
                setTimeout(()=>{
                  this.$router.push({ path: '/my' })
                },300)
              });
          }
          else {
            Toast(msg);
          }
        }
      ).catch(err=>console.log(err))
    },
  },
  created(){
   
  },
};
</script>

<style lang="less">
@import '../common/less/varible.less';

.login {
  padding-top: 150px;

  .van-button--normal {
    background-color: @bgColor;
    border: 0;
  }

  .link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    // text-decoration: underline;

  }

  .message {
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 20px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    color: #666;
    line-height: 175%;

    a {
      color: #0c8bf3;
    }

    .van-checkbox {
      display: inline-block !important;
    }
  }

}
</style>
